<template>
	<div>
		<div class="tabNav">
			<router-link to="/index">
                <img src="../assets/img/sidebar1.png" />首页
            </router-link>
			<b>/<img src="../assets/img/settlement.png" />账户管理</b>
		</div>
		<el-row :gutter="24">
			<el-col :span="24">
				<el-card class="cardTits cardTitss cardTitdd invoiceManage table-drop" shadow="hover">
					<div class="search">
					<el-input
						placeholder="企业名称"
						v-model="searchVal"
					></el-input>
					<el-button type="primary" @click="search()">查询</el-button>
					</div>
					<el-table :data="tableData" stripe style="width: 100%" @sort-change="sortChange">
						<el-table-column width="30">
						</el-table-column>
						<el-table-column prop="id" sortable="custom" width="80" label="序号">
						</el-table-column>
						<el-table-column prop="businessName" sortable="custom" label="企业名称">
						</el-table-column>
						<el-table-column prop="socialCreditCode" sortable="custom" label="统一社会信用代码">
						</el-table-column>
						<el-table-column prop="allAmount" sortable="custom" label="总充值金额">
							<template #default="item">
								{{ formatNumber(item.row.allAmount) }}
							</template>
						</el-table-column>
						<el-table-column prop="businessBalance" sortable="custom" label="余额">
							<template #default="item">
								{{ formatNumber(item.row.businessBalance) }}
							</template>
						</el-table-column>
						<el-table-column prop="freezeBalance" sortable="custom" label="冻结金额">
							<template #default="item">
								{{ formatNumber(item.row.freezeBalance) }}
							</template>
						</el-table-column>
						<el-table-column prop="remainBalance" sortable="custom" label="可用余额">
							<template #default="item">
								{{ formatNumber(item.row.remainBalance) }}
							</template>
						</el-table-column>
						<el-table-column prop="updateTime" sortable="custom" align="center" label="更新时间">
							<template #default="item">
							{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.updateTime)) }}
							</template>
						</el-table-column>
						<el-table-column
							prop="caozuo"
							label="操作"
							width="130"
							class-name="editor"
						>
							<template #default="item">
								<el-button type="text" @click="getSubWalletList(item.row.walletNo)">详情</el-button>
								<el-button type="text" @click="syncWalletBalance(item.row.walletNo)">余额刷新</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination v-if="tableData.length > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="currentPage" :page-sizes="arrPage" :page-size="selectPage"
						layout="total, sizes, prev, pager, next, jumper" :total="renwuTotals">
					</el-pagination>
				</el-card>
			</el-col>
		</el-row>
		<!-- 详情弹出层 -->
		<el-dialog title="账户详情" v-model="detailsTaskModule" width="70%">
			<div class="cardTits cardTitss cardTitdd invoiceManage table-drop">
				<el-button type="primary" style="float: right;margin: -25px 0 20px 0;" @click="addSubWallets()">新增账户</el-button>
				<el-table :data="tableData1" stripe style="width: 100%" @sort-change="sortChange">
					<el-table-column width="30">
					</el-table-column>
					<el-table-column prop="id" sortable="custom" width="80" label="序号">
					</el-table-column>
					<el-table-column prop="businessBankName" sortable="custom" label="开户行">
					</el-table-column>
					<el-table-column prop="businessBankNo" sortable="custom" label="银行账号">
					</el-table-column>
					<el-table-column prop="socialCreditCode" sortable="custom" width="180" label="统一社会信用代码">
					</el-table-column>
					<el-table-column prop="updateTime" sortable="custom" align="center" label="更新时间" width="180">
						<template #default="item">
						{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.updateTime)) }}
						</template>
					</el-table-column>
					<el-table-column
						prop="caozuo"
						label="操作"
						width="80"
						class-name="editor"
					>
						<template #default="item">
							<el-button type="text" @click="updateSubWallets(item.row)">修改</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<template #footer>
				<span class="dialog-footer">
				<el-button type="primary" @click="detailsTaskModule = false">确 定</el-button>
				</span>
			</template>
		</el-dialog>

		<!-- 新增账户 -->
		<el-dialog title="新增账户" v-model="detailsTaskModules" width="600px">
			<div class="details-task">
				<el-form
				:model="taskForm"
				:rules="rules"
				label-width="100px"
				ref="taskForm"
				class="demo-ruleForm"
				>
					<el-form-item label="开户行：" prop="bankName">
						<el-input v-model="taskForm.bankName"></el-input>
					</el-form-item>
					<el-form-item label="银行账号：" prop="bankNo">
						<el-input v-model="taskForm.bankNo"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
				<el-button type="primary" @click="addSubWallet">确 定</el-button>
				</span>
			</template>
		</el-dialog>

		<!-- 修改账户 -->
		<el-dialog title="修改账户" v-model="updateSubWalletShow" width="600px">
			<div class="details-task">
				<el-form
				:model="taskForm"
				:rules="rules"
				label-width="100px"
				ref="taskForm"
				class="demo-ruleForm"
				>
					<el-form-item label="开户行：" prop="bankName">
						<el-input v-model="taskForm.bankName"></el-input>
					</el-form-item>
					<el-form-item label="银行账号：" prop="bankNo">
						<el-input v-model="taskForm.bankNo"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
				<el-button type="primary" @click="updateSubWallet()">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				SelectPlatformData: {}, // 灵活用功平台信息
				orderByZH: false,
				orderByAsc: false,
				orderByColume: 'createTime',
				currentPage: 1,
				renwuTotals: 0, // 结算任务明细总条数
				total: 0, // 总条数
				arrPage: [10, 20], // 每页条数
				selectPage: 10, // 每页选中条数
				tableData: [],
				tableData1: [],
				value: '',
				value1: '',
				searchVal: '',
				id: '',
				detailsTaskModule: false,
				detailsTaskModules: false,
				taskForm: {
					bankName: "", 
					bankNo: "", 
				},
				rules: {
					bankName: [{ required: true, message: "请输入开户行", trigger: "blur" }],
					bankNo: [{ required: true, message: "请输入银行账号", trigger: "blur" },],
				},
				walletNo: '',
				updateSubWalletShow: false,
			};
		},
		components: {},
		mounted() {
			this.getSelectPlatform()
		},
		methods: {
			search(){
				this.getSelectPlatform();
			},
			handleSizeChange(val) {
				this.selectPage = val
				this.getSelectPlatform()
			},
			
			handleCurrentChange(val) {
				// 切换当前页
				this.currentPage = val
				this.getSelectPlatform()
			},
			getSelectPlatform() {
				// 平台端查询企业余额列表
				this.$http({
					url: '/api/quick/wallet/platform/remain',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					},
					data: {
						businessName: this.searchVal,
						"pageNum": this.currentPage,
						"pageSize": this.selectPage,
						orderByAsc: this.orderByAsc, // 是否正序
						orderByColume: this.orderByColume, // 排序字段
						orderByZH: this.orderByZH, // 是否汉字
					}
				}).then(data => {
					if(data.code === 0) {
						this.tableData = data.result.list
						this.renwuTotals = data.result.total
					}
				})
			},
			getSubWalletList(walletNo) {
				this.walletNo = walletNo
				this.detailsTaskModule = true
				// 根据钱包编号查询子账户列表
				this.$http({
					url: '/api/quick/wallet/getSubWalletList',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					},
					data: {
						walletNo: walletNo,
						"pageNum": 1,
						"pageSize": 100,
						orderByAsc: this.orderByAsc, // 是否正序
						orderByColume: this.orderByColume, // 排序字段
						orderByZH: this.orderByZH, // 是否汉字
					}
				}).then(data => {
					if(data.code === 0) {
						this.tableData1 = data.result
						this.total = data.result.total
					}
				})
			},
			sortChange(d) {
				// 监听排序
				if(d.prop == null) {
					// 默认排序方式
					this.orderByZH = false
					this.orderByAsc = false
					this.orderByColume = 'createTime'
				}else {
					let orderByZH = false
					if(d.id == "legalName"|| d.id == "receiveBank") {
						orderByZH = true
					}
					this.currentPage = 1
					this.selectPage = 10
					let orderByAsc = d.order == "descending" ? false : true
					this.orderByZH = orderByZH
					this.orderByAsc = orderByAsc
					this.orderByColume = d.id
				}
			},
			addSubWallets(){
				this.detailsTaskModules = true
				this.taskForm.bankNo = ""
				this.taskForm.bankName = ""
			},
			addSubWallet(){
				// 添加子账户
				this.$refs.taskForm.validate((valid) => {
					if (valid) {
						this.$http({
							url: '/api/quick/wallet/addSubWallet',
							method: 'post',
							headers: {
								'Content-Type': 'application/json'
							},
							data: {
								walletNo: this.walletNo,
								bankNo: this.taskForm.bankNo,
								bankName: this.taskForm.bankName,
								"pageNum": 1,
								"pageSize": 100,
								orderByAsc: this.orderByAsc, // 是否正序
								orderByColume: this.orderByColume, // 排序字段
								orderByZH: this.orderByZH, // 是否汉字
							}
						}).then(data => {
							if(data.code === 0) {
								this.$message({
									message: '操作成功！',
									type: 'success',
									offset: 60
								})
								this.getSubWalletList(this.walletNo)
								this.detailsTaskModules = false
							}
						})
					}
				});
			},
			updateSubWallets(row){
				this.updateSubWalletId = row.id
				this.updateSubWalletShow = true
				this.taskForm.bankName = row.businessBankName
				this.taskForm.bankNo = row.businessBankNo
			},
			updateSubWallet(){
				// 修改子账户
				this.$http({
					url: '/api/quick/wallet/updateSubWallet',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					},
					data: {
						bankName: this.taskForm.bankName,
						bankNo: this.taskForm.bankNo,
						id: this.updateSubWalletId,
					}
				}).then(data => {
					if(data.code === 0) {
						this.getSubWalletList(this.walletNo)
						this.updateSubWalletShow = false
						this.$message({
							message: '操作成功！',
							type: 'success',
							offset: 60
						})
					}
				})
			},
			syncWalletBalance(walletNo){
				// 同步钱包余额
				this.$http({
					url: '/api/quick/wallet/syncWalletBalance',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					},
					data: {
						walletNo: walletNo,
						"pageNum": this.currentPage,
						"pageSize": this.selectPage,
						orderByAsc: this.orderByAsc, // 是否正序
						orderByColume: this.orderByColume, // 排序字段
						orderByZH: this.orderByZH, // 是否汉字
					}
				}).then(data => {
					if(data.code === 0) {
						this.$message({
							message: '刷新中，请稍后查询余额',
							type: 'success',
							offset: 60
						})
						this.getSelectPlatform()
					}
				})
			}
		}
	};
</script>
<style scoped>
.tabNav strike {
	color: #dd0b01;
    font-weight: bold;
    text-decoration: none;
}
.cardTit {
    color: rgba(10, 46, 106, 1);
    line-height: 50px;
    padding-left: 20px;
    font-size: 14px;
    font-weight: normal;
}
.excelDownload {
    position: absolute;
    right: 30px;
    top: 10px;
    cursor: pointer;
    z-index: 111;
}
.serveTime {
	float: left;
    margin-left: 50px;
    position: relative;
    top: 10px;
}
.showCloro {
	cursor: pointer;
	color: #326CF0;
    text-align: left;
}
</style>